<!--用户报名历史页-->
<template>
    <v-layout justify-center>
        <v-flex xs10 style="padding: 30px">
            <div class="mybase">
                <v-layout row align-center style="height: 74px;padding-left: 30px;padding-right: 30px">
                    <div>报名历史</div>
                </v-layout>
                <v-divider style="border-color: brown"></v-divider>
                <v-list class="pa-0">
                    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                        <div v-for="(item,index) in  histories" :key="index" class="myListItem" slot="activator" >
                            <v-list-tile style="padding: 10px 14px;">
                                <div style="font-size: 14px;color: #252631;">
                                    九江印·2018最美长江岸线九江国际半程马拉松
                                </div>
                                <v-spacer></v-spacer>
                                <div>
                                    <v-layout column>
                                        <div style="font-size: 12px;color: #252631;">2018-9-21 23:02</div>
                                        <div style="color: #98a9bc;font-size: 10px">表单提交日期</div>
                                    </v-layout>
                                </div>
                                <div style="margin-left: 30px;margin-right: 30px">
                                    <v-layout column>
                                        <div style="font-size: 12px;color: #252631;">2018-10-1 12:00</div>
                                        <div style="color: #98a9bc;font-size: 10px">项目截止日期</div>
                                    </v-layout>
                                </div>
                                <div>
                                    <v-layout style="background-color: rgba(255,171,43,.08);height: 34px;width: 84px;" align-center justify-center>
                                        <div style="color: rgb(255,171,43);font-size: 14px">审核中</div>
                                    </v-layout>
                                </div>

                            </v-list-tile>
                            <v-divider style="margin-left: 30px;margin-right: 30px;color: rgb(234,237,243)"></v-divider>
                        </div>

                    </div>
                </v-list>
            </div>

        </v-flex>
    </v-layout>
</template>

<script>
    export default {
        name: 'History',
        data () {
            return {
                // 是否正在加载过程中
                busy: false,
                page: 1,
                pageSize: 8,
                histories: [
                    {title: '', time: '', status: ''},
                ],
            };
        },
        methods: {
            loadMore: function () {
                this.busy = true;
                setTimeout(() => {
                    for (let i = 0, j = 10; i < j; i++) {
                        this. histories.push({title: '', time: '', status: ''});
                    }
                    this.busy = false;
                }, 1000);
            },
        },
    };
</script>

<style scoped>

</style>
